//渲染便签
function bindHtml(arr) {
    let html = ""
    arr.forEach((item, index) => {
        index = index + 1
        html += `
        <div class="tip1" id=${item.id}> 
        <div class="tip_h" title="双击关闭纸条">
                <div class="num">第[`+ index + `]条 ${item.time}</div>
                <div class="close" title="关闭纸条">×</div>
                <div class="clr"></div>
            </div>
            <div class="tip_c">
                ${item.content}
            </div>
            <div class="tip_f">
                <div class="icon">
                    <img src="images/bpic_1.gif" alt="" title="">
                </div>
                <div class="name">${item.name}</div>
                <div class="clr"></div>
                </div>
            </div>`
    })
    //一定要return 否则页面内容undefined
    return html;
}


ajax({
    url: 'http://www.chst.vip:1902/students/getstulist'
}).then(res => {

    var count = $('#count')[0]
    console.log(res.data);
    //console.log(res.data.length);
    //下面评论数 刷新更新
    count.innerText = `评论:` + res.data.length + ``
    let html = bindHtml(res.data)
    content.innerHTML = html


    //获取元素
    var tip = $('.tip1');
    var close = $('.close');
    var tiph = $('.tip_h');
    var tips = $('.tip1')
    var ipt = $('#ipt')
    var area = $('textarea')[0]
    var sub = $('#submit')[0]



    //小纸条随机生成位置,但是需要限定在中间这个centent中

    var left = $('#content').width() - tip.width();
    var top = $('#content').height() - tip.height();
    for (i = 0; i < tip.length; i++) {
        tip[i].style.left = Math.random() * left + 'px'
        tip[i].style.top = Math.random() * top + 'px'
    }

    //双击tip头部删除功能
    for (i = 0; i < tiph.length; i++) {
        $(tiph[i]).dblclick(function () {
            var id = $(this).parent().attr('id')
            console.log(id);
            var flag = confirm('再想想，真的要删除？？？')
            if (flag) {
                ajax({
                    url: 'http://www.chst.vip:1902/students/del',
                    data: { id: id }
                }).then(res => {
                    //根据state判断是否删除成功，删除失败时,本地不移除,不更新视图
                    if (res.state === true) {
                        let num = i + 1
                        $(this).parent().css('display', 'none')
                        alert(res.msg)
                        location.reload()
                    } else {
                        alert('出错啦~删除失败！')
                    }
                })
            } else {
                alert('您已取消删除。')
            }
        })
    }



    //点击小纸条上面的x可以删除小纸条

    for (let i = 0; i < close.length; i++) {
        $(close[i]).click(function () {
            var id = $(close[i]).parent().parent().attr('id')
            console.log(id);
            var flag = confirm('再想想，真的要删除？？？')
            if (flag) {
                ajax({
                    url: 'http://www.chst.vip:1902/students/del',
                    data: { id: id }
                }).then(res => {
                    //根据state判断是否删除成功，删除失败时,本地不移除,不更新视图
                    if (res.state === true) {
                        let num = i + 1
                        $(this).parent().parent().css('display', 'none')
                        alert(res.msg)
                        location.reload()
                    } else {
                        alert('出错啦~删除失败！')
                    }
                })
            } else {
                alert('您已取消删除。')
            }
        })
    }



    //点击小纸条的时候,让小纸条到最前面
    var z = 999;
    for (let i = 0; i < tips.length; i++) {
        $(tips[i]).click(function () {
            $(this).css("z-index", z)
            z++;
        })


        //拖拽小纸条可以移动
        tiph[i].onmousedown = function (e) {
            $(this).css("z-index", z)
            z++;
            console.log(tiph[i].parentNode);
            document.onmousemove = function (e) {
                let movex = e.clientX - content.offsetLeft - tiph[i].offsetWidth / 2
                let movey = e.clientY - content.offsetTop - tiph[i].offsetHeight / 2
                let x = content.offsetWidth - tips[i].offsetWidth
                let y = content.offsetHeight - tips[i].offsetHeight
                //判断边界
                if (movex < 0) {
                    movex = 0;
                } else if (movex > x) {
                    movex = x;
                }
                if (movey < 0) {
                    movey = 0;
                } else if (movey > y) {
                    movey = y;
                }
                tiph[i].parentNode.style.left = movex + 'px'
                tiph[i].parentNode.style.top = movey + 'px'
            }
        }
        document.onmouseup = function (e) {
            document.onmousemove = null;
        }

    }

    //点击按钮,将本地评论提交到远程服务器
    if (!this.value) {
        sub.disabled = true
        sub.style.backgroundColor = 'grey'
    }
    area.oninput = function () {
        if (!this.value) {
            sub.disabled = true
            sub.style.backgroundColor = 'grey'
        } else {
            sub.disabled = false
            sub.style.backgroundColor = 'hotpink'
        }
    }

    sub.onclick = function () {
            //console.log(area.value);
        let name = prompt('请输入您的昵称:')
        if (name === '') {
            alert('昵称不能为空哦~')
        }
       if(name){
        ajax({
            url: 'http://www.chst.vip:1902/students/addlist',
            method: 'post',
            data: { content: area.value, name: name }
        }).then(res => {
            console.log(res);
            location.reload()//自己刷新页面
        })
       }else{
           alert('不评论拉倒')
       }
    }
    //添加键盘事件enter
    document.onkeyup = function (e) {
        console.log(area.value);
        if (e.keyCode === 13) {
            if (!area.value) {
                alert('输入框不能为空！！！！！')
            } else {
                let name = prompt('请输入您的昵称:')
               if(name){
                ajax({
                    url: 'http://www.chst.vip:1902/students/addlist',
                    method: 'post',
                    data: { content: area.value, name: name }
                }).then(res => {
                    console.log(res);
                    location.reload()//自己刷新页面
                })
               }else{
                alert('不评论拉倒')
               }
            }
        }
    }
})


